<template>
  <div class="botList">
    <div class="accountHeader">
      <div>我管理的机器人</div>
      <el-button type="primary" size="small" round @click="addBot('add')">
        + 新增机器人
      </el-button>
    </div>
    <div>

    </div>
    <el-table :data="tableData"  size="small"
              style="width: 100%;"
              border
              :header-cell-style="{ background: '#f4f4f4', color: '#000' }"
    >
      <el-table-column type="index" label="序号" />
      <el-table-column prop="robotName" label="机器人名字"  />
      <el-table-column prop="usePlatformAccount" label="服务账号"  >
        <template #default="{row}">
          <div v-for="accout in row.usePlatformAccount" :key="accout.platform">{{ accout.accountName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="msgType" label="回复类型"  >
        <template #default="{row}">
          <span style="margin-right: 10px" v-for="(type, index) in row.msgType" :key="index">{{ type == 1 ? '私信' : type == 2 ? '评论' : '进入聊天框' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="useStatus" label="状态"  >
        <template #default="{row}">
          <el-switch :active-value="1" :inactive-value="0" @change="changeStatus(row)" v-model="row.useStatus" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template #default="{row}">
          {{formatDate(row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160px">
        <template #default="{row}">
          <el-button link type="danger" size="small" @click="delBot(row)">删除</el-button>
          <el-button link type="primary" size="small" @click="goBotSet(row)">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddOrEditBot ref="AddOrEditBotRef" @successAddBot="getTableList"></AddOrEditBot>
  </div>
</template>

<script setup>
import AddOrEditBot from "./addOrEditBot/index"
import { onMounted, ref } from 'vue'
import {get_keyword_auto_reply_robot_list, setting_reply_robot_status, del_reply_robot} from "@/api/settingtApi";
import {formatDate} from "@/utils/d_times"
import {ElMessage, ElMessageBox} from "element-plus";

onMounted(() => {
  getTableList()
})
const tableData = ref([])
const getTableList = () => {
  get_keyword_auto_reply_robot_list({pageSize: 100, pageNum: 1}).then(res => {
    tableData.value = res.data.list || []
    tableData.value.forEach(el => {
      if(el.msgType) {
        el.msgType = el.msgType.split(",")
      }else {
        el.msgType = []
      }
    })
  })
}
const emit = defineEmits(["getBotDetail"])
const goBotSet = (row) => {
  emit("getBotDetail", row)
}

const delBot = async (row) => {
  ElMessageBox.confirm(
    '确定删除该机器人吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async (res) => {
    const result = await del_reply_robot({id: row.id})
    ElMessage.success(result.msg)
    getTableList()
  }).catch(() => {

  })

}

const changeStatus = (item) => {
  setting_reply_robot_status({
    id: item.id,
    status: item.useStatus ? 1 : 0
  }).then(res => {
    ElMessage.success(res.msg)
  })
}
const AddOrEditBotRef = ref()
const addBot = () => {
  AddOrEditBotRef.value.open()
}
</script>

<style scoped lang="scss">
.accountHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}
</style>